<template>
	<div>
		<div style="font-size: 18px;">
			<div>
				<el-row :span="24" style="margin:10px 0 0;">
					<el-form :inline="true" :model="formInlineCash" class="demo-form-inline" label-width="100px">
						<el-form-item label="商户名称">
							<el-input v-model="formInlineCash.storeName"></el-input>
						</el-form-item>
						<el-form-item label="时间:">
							<el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width:180px;"></el-date-picker>
							到
							<el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;"></el-date-picker>
						</el-form-item>
						<el-form-item label="按提现状态:">
							<el-col :span="18">
								<el-select v-model="formInlineCash.orderStatus">
									<el-option v-for="item in orderStatusList" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-col>

						</el-form-item>
						<el-button type="primary" @click="fetchDataCash(1)">查询</el-button>
					</el-form>
				</el-row>
			</div>
			<el-table :data="pageInfoCash.dtos" v-loading="table_loadingCash" element-table_loading-text="加载中" style="width: 100%;">
				<el-table-column label="商品名称" width="200" prop='goodsName'>
					<template scope="scope">
						<div style="display: flex;justify-content: space-between;padding: 10px;">
							<span style="align-self: center;">{{scope.row.goodsName}}</span>
							<img style="width: 80px;" :src="scope.row.goodsIcon" alt="">
						</div>
					</template>
				</el-table-column>
				<el-table-column label="商品数量" prop='goodsNum'>
				</el-table-column>
				<el-table-column label="交易金额" prop='orderAmt'>
				</el-table-column>
				<el-table-column label="确认时间" prop='okTime'>
				</el-table-column>

				<el-table-column label="订单状态">
					<template scope="scope">
						<p v-if="scope.row.orderState == 'W'">已完成</p>
						<p v-if="scope.row.orderState == 'C'">交易关闭</p>
						<p v-if="scope.row.orderState == 'Z'">交易中</p>
					</template>
				</el-table-column>
				<!-- 						<el-table-column label="操作">
									<template scope="scope">
										<el-button type="primary" size="small" @click="navToCash(scope.row)">提现
										</el-button>
									</template>
								</el-table-column> -->
			</el-table>
			<div class="paginate">
				<el-pagination @current-change="handleCurrentCashChange" :current-page="pageInfoCash.pageNum" :page-size="pageInfoCash.pageSize"
				 layout="total, prev, pager, next, jumper" :total="pageInfoCash.count">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInlineCash: {
					pageNum: 1,
					pageSize: 8,
					storeId: '',
					storeName: '',
					orderStatus: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'ok_time',
					desc: 'desc',
				},
				pageInfoCash: {
					pageNum: 1,
					pageSize: 8,
					count: 1,
					dtos: []
				},
				orderStatusList: [{
					value: '',
					label: '全部'
				}, {
					value: 'N',
					label: '未转账'
				}, {
					value: 'Y',
					label: '已转账'
				}]
			}
		},
		created() {
			this.fetchDataCash(1)
		},
		activated() {

		},
		methods: {
			handleCurrentCashChange(val) {
				this.fetchDataCash(val)
			},
			fetchDataCash(page = 1) {
				let vm = this
				if (vm.startTime && vm.endTime) {
					vm.formInlineCash.okTimeStart = dateFormat(vm.startTime)
					vm.formInlineCash.okTimeEnd = dateFormat(vm.endTime)
					if (vm.formInlineCash.okTimeStart > vm.formInlineCash.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInlineCash.okTimeStart = ''
					vm.formInlineCash.okTimeEnd = ''
				}
				vm.table_loadingCash = true
				vm.pageInfoCash.pageNum = page
				vm.formInlineCash.pageNum = page
				console.log(vm.formInlineCash)
				vm.dataApi.ajax('tranferOrderList', vm.formInlineCash, res => {
					vm.table_loadingCash = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfoCash.dtos = data.lists
					vm.pageInfoCash.count = data.count
				});
			},
		}
	}
</script>

<style>
</style>
